﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>todolist</title>
        <link rel="stylesheet" href="/public/css/base.css" />
        <link rel="stylesheet" href="/public/css/index.css" />
        <style>
            .add-task {
                width: 100%;
                height: 40px;
                background-color: #ccc;
                font-size: 18px;
                line-height: 40px;
                color: #fff;
            }
        </style>
    </head>
    <body>
        <section class="todoapp">
            <div>
                <header>
                    <h1><%= todoTitle %></h1>
                </header>
                <button onclick="window.location.href = '/task/add'" class="add-task">新增新任务</button>
                <section class="main">
                    <ul class="todo-list">
                        <% for(let i = 0, len = task.length; i < len; i++) { %>
                        <li>
                            <div class="view">
                                <% if(task[i].done) { %>
                                <input class="toggle" type="checkbox" checked onclick="changeTask(<%= task[i].ID %>)" />
                                <% } else { %>
                                <input class="toggle" type="checkbox" onclick="changeTask(<%= task[i].ID %>)" />
                                <% } %>
                                <label><%= task[i].title %></label>
                                <button class="destroy" onclick="deleteTask(<%= task[i].ID %>)"></button>
                            </div>
                            <input class="edit" />
                        </li>
                        <% } %>
                    </ul>
                </section>
                <footer class="footer">
                    <span class="todo-count">
                        <strong>12</strong>
                        <span>条未选中</span>
                    </span>
                    <ul class="filters">
                        <li>
                            <a href="#/all">All</a>
                        </li> 
                        <li>
                            <a href="#/active">Active</a>
                        </li> 
                        <li>
                            <a href="#/completed">Completed</a>
                        </li>
                    </ul>
                </footer>
            </div>
        </section>
        <script>
            function changeTask(id) {
                window.location.href = '/task/update/' + id;
            }

            function deleteTask(id) {
                window.location.href = '/task/delete/' + id;
            }
        </script>
    </body>
</html>
